<template>
  <div class="FactoryOverview">
    <div class="leftFactory">
      <div class="conList second">
        <p class="conTitle">
          <span>环境监测</span>
        </p>
        <ul class="conMain">
          <li>
            <p class="sctsIcon1"></p>
            <p>温度</p>
            <p><span>25.6</span>℃</p>
            <p>标准</p>
          </li>
          <li>
            <p class="sctsIcon2"></p>
            <p>湿度</p>
            <p><span>53.6</span>%</p>
            <p>标准</p>
          </li>
          <li>
            <p class="sctsIcon3"></p>
            <p>TVOC</p>
            <p><span>0.0001</span>ppm</p>
            <p>标准</p>
          </li>
          <li>
            <p class="sctsIcon4"></p>
            <p>室内PM2.5</p>
            <p><span>85</span>ug/m³</p>
            <p class="warring">轻度污染</p>
          </li>
        </ul>
      </div>
      <div class="conList first">
        <p class="conTitle">
          <span>产能及库存统计</span>
        </p>
        <div class="conMain">
          <ul>
            <li>
              <div class="inventory1"></div>
              <div>
                <p>当月产量</p>
                <p><span>6.5</span>万/件</p>
              </div>
            </li>
            <li>
              <div class="inventory6"></div>
              <div>
                <p>当日产量</p>
                <p><span>1.2</span>万/件</p>
              </div>
            </li>
            <li>
              <div class="inventory2"></div>
              <div>
                <p>库存统计</p>
                <p><span>5.5</span>万/件</p>
              </div>
            </li>
            <li>
              <div class="inventory3"></div>
              <div>
                <p>当月出库</p>
                <p><span>0.5</span>万/件</p>
              </div>
            </li>
            <li>
              <div class="inventory5"></div>
              <div>
                <p>当日出库</p>
                <p><span>5.5</span>万/件</p>
              </div>
            </li>
            <li>
              <div class="inventory4"></div>
              <div>
                <p>剩余库存</p>
                <p><span>0.5</span>万/件</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="conList third">
        <p class="conTitle">
          <span>月生产订单动态</span>
        </p>
        <div class="conMain">
          <div class="titleBox">
            <div class="title">
              <p>
                已完成
                <span>2590</span>
                单
              </p>
            </div>
            <div class="title">
              <p>
                进行中
                <span>12</span>
                单
              </p>
            </div>
          </div>
          <div class="tableBox">
            <!-- <CarouselList :originalData="originalData" :scrollDelay="3000"></CarouselList> -->
            <CarouselList :config="scrollBoardConfig"></CarouselList>

            <!-- <li class="title">
              <p>生产批次</p>
              <p>数量</p>
              <p>剩余时长</p>
              <p>交货日期</p>
              <p>订单状态</p>
            </li>
            <li>
              <p>2025070</p>
              <p>4232</p>
              <p>0</p>
              <p>1978-03-13</p>
              <p>
                <Precent :plan="89" v-if="statusTable === 'on'"></Precent>
                <span v-else></span>
                89%
              </p>
            </li>
            <li>
              <p>2025070</p>
              <p>4232</p>
              <p>8h</p>
              <p>1978-03-13</p>
              <p>
                <Precent :plan="42" v-if="statusTable === 'on'"></Precent>
                <span v-else></span>42%
              </p>
            </li>
            <li class="warring">
              <p>2025070</p>
              <p>4232</p>
              <p>已延期1天2h</p>
              <p>1978-03-13</p>
              <p>
                <Precent v-if="statusTable === 'warring'"></Precent>
                <span v-else></span>延期
              </p>
            </li>
            <li class="success">
              <p>2025070</p>
              <p>4232</p>
              <p>10天2h</p>
              <p>1978-03-13</p>
              <p>
                <Precent v-if="statusTable === 'success'"></Precent>
                <span v-else></span>100%
              </p>
            </li> -->
          </div>
        </div>
      </div>
    </div>
    <div class="centerMain">
      <ul class="topMain">
        <li class="inventoryBox inventory7"></li>
        <li>
          <p>月生产计划达成</p>
          <p><span>96</span>%</p>
        </li>
        <li class="inventoryBox inventory8"></li>
        <li>
          <p>月产量</p>
          <p><span>82</span>%</p>
        </li>
        <li class="inventoryBox inventory9"></li>
        <li>
          <p>月品质良率</p>
          <p><span>96</span>%</p>
        </li>
        <li class="inventoryBox inventory10"></li>
        <li>
          <p>综合周转率</p>
          <p><span>23.16</span>次/月</p>
        </li>
      </ul>
      <div class="bottomMain">
        <div class="centerBottom" ref="centerBottomRef"></div>
      </div>
    </div>
    <div class="rightFactory">
      <ul class="rightF1">
        <li class="button">
          <p>总事件</p>
          <p><span>5689</span>个</p>
        </li>
        <li class="button">
          <p>今日事件</p>
          <p><span>5689</span>个</p>
        </li>
        <li class="icon"></li>
        <li class="text">当前无紧急事件</li>
      </ul>
      <div class="rightF2 rightStyles conList">
        <p class="conTitle">
          <span>成品仓储状态</span>
        </p>
        <div class="con">
          <div class="productionEquipment" ref="productionEquipmentRef"></div>
          <div class="textBox">
            <p>总库位</p>
            <p>1800</p>
          </div>
        </div>
      </div>
      <div class="rightF3 conList">
        <p class="conTitle">
          <span>生产良率分析</span>
        </p>
        <div class="yieldBox">
          <div class="title">
            达标良率
            <span>97</span>%
          </div>
          <div class="yieldList" ref="yieldRef"></div>
        </div>
      </div>
      <div class="rightF4 rightStyles conList">
        <p class="conTitle">
          <span>质量问题分析</span>
        </p>
        <div class="con">
          <div class="zlBottom">
            <div class="productionEquipmentBox">
              <div class="textZL">
                <p>
                  <span>{{ nhValue }}</span
                  >%
                </p>
                <p>{{ nhTxt }}</p>
              </div>
              <div class="productionEquipment" ref="energyRef"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import Precent from './components/precent.vue'
import CarouselList from './components/CarouselList.vue'
let statusTable = ref('on')
let yieldList = null
let energyList = null
let centerBottomList = null
let productionEquipmentList = null
const centerBottomRef = ref(null)
const productionEquipmentRef = ref(null)
const yieldRef = ref(null)
const energyRef = ref(null)

const originalData = [
  { id: 1, batch: '20250701', quantity: '4232', remainingTime: '0', deliveryDate: '1978-03-13', status: 'on', progress: 89 },
  { id: 2, batch: '20250702', quantity: '4232', remainingTime: '8h', deliveryDate: '1978-03-13', status: 'on', progress: 42 },
  { id: 3, batch: '20250703', quantity: '4232', remainingTime: '已延期1天2h', deliveryDate: '1978-03-13', status: 'warring', progress: 30 },
  { id: 4, batch: '20250704', quantity: '4232', remainingTime: '10天2h', deliveryDate: '1978-03-13', status: 'success', progress: 100 },
  { id: 5, batch: '20250705', quantity: '3500', remainingTime: '5h', deliveryDate: '1978-03-14', status: 'on', progress: 65 },
  { id: 6, batch: '20250706', quantity: '2800', remainingTime: '已延期2天', deliveryDate: '1978-03-12', status: 'warring', progress: 20 },
]
const scrollBoardConfig = {
  // 表头配置
  header: [
    { title: '生产批次', dataIndex: 'batch' },
    { title: '数量', dataIndex: 'quantity' },
    { title: '剩余时长', dataIndex: 'remainingTime' }, // 隐藏
    { title: '交货日期', dataIndex: 'deliveryDate' },
    { title: '订单状态', dataIndex: 'status' }
  ],

  // 表格数据（每行对应一个数组）
  data: [
    { batch: '20250701', quantity: '4232', remainingTime: '0', deliveryDate: '1978-03-13', status: 'on', progress: 89 },
    { batch: '20250702', quantity: '4232', remainingTime: '8h', deliveryDate: '1978-03-13', status: 'on', progress: 42 },
    { batch: '20250703', quantity: '4232', remainingTime: '已延期1天2h', deliveryDate: '1978-03-13', status: 'warring', progress: 30 },
    { batch: '20250704', quantity: '4232', remainingTime: '10天2h', deliveryDate: '1978-03-13', status: 'success', progress: 100 },
    { batch: '20250705', quantity: '3500', remainingTime: '5h', deliveryDate: '1978-03-14', status: 'on', progress: 65 },
    { batch: '20250706', quantity: '2800', remainingTime: '已延期2天', deliveryDate: '1978-03-12', status: 'warring', progress: 20 },
    // [1, '张三', '<span class="status success">正常</span>', '<button class="btn">查看</button>'],
    // [2, '李四', '<span class="status warring">警告</span>', '<button class="btn">编辑</button>'],
    // [3, '王五', '<span class="status success">正常</span>', '<button class="btn">删除</button>'],
    // 更多数据...
  ],

  // 可选配置：
  rowNum: 4,                // 可见行数
  headerBGC: '#007BFF',     // 表头背景色
  oddRowBGC: '#003B51',     // 奇数行背景色
  evenRowBGC: '#0A2732',    // 偶数行背景色
  waitTime: 3000,           // 滚动间隔时间（毫秒）
  headerHeight: 40,         // 表头高度
  headerHide: true,         // 表头显隐
  columnWidth: [80, 120, 100, 100], // 每列宽度
  align: ['center', 'left', 'center', 'center'], // 每列对齐方式
  index: false,              // 是否显示索引列
  indexHeader: '',      // 索引列标题
  carousel: 'single',       // 滚动方式：'single'（单行）或 'page'（整页）
  hoverPause: true          // 鼠标悬停时是否暂停滚动
}

const getCenterBottomInit = () => {
  let option = {
    legend: {
      data: ['计划产量', '实际产量'],
      itemWidth: 6,  // 设置宽度
      itemHeight: 6, // 设置高度
      icon: 'diamond',
      textStyle: {
        color: '#96b2d2',
        fontSize: 10
      },
      left: '35%',
      bottom: '1%',
    },
    xAxis: {
      type: 'category',
      data: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6', '1/7', '1/8'],
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          width: 1,
          color: '#2d3d4f'
        }
      },
      type: 'value',
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260, 250],
        type: 'line',
        name: '计划产量',
        color: "rgba(25,120,229,1)",
        symbol: 'none',
        areaStyle: {
          color: "rgba(25,120,229,0.1)",
        },
      },
      {
        data: [250, 130, 64, 118, 235, 247, 160, 150],
        type: 'line',
        name: '实际产量',
        symbol: 'none',
        color: "rgba(94,228,106,1)",
        areaStyle: {
          color: "rgba(94,228,106,0.1)",
        },
      }
    ],
    grid: {
      top: '10px',
      left: '10%',
      right: '4%',
      bottom: '35%',
    },
  }
  centerBottomList.setOption(option, true)
  window.addEventListener("resize", resize)
}
// 能耗监测
const getEnergyInit = () => {
  let option = {
    // tooltip: {
    //   trigger: 'item'
    // },
    legend: {
      show: true,
      formatter(name) {
        var total = 0
        for (var i = 0; i < option.series[0].data.length; i++) {
          total += option.series[0].data[i].value
        }
        for (i = 0; i < option.series[0].data.length; i++) {
          var dpercent = (option.series[0].data[i].value / total * 100).toFixed(0) + '%'
          if (option.series[0].data[i].name === name) {
            //可以显示名称和值和百分比
            // return name+’ ‘+option.series[0].data[i].value+’’+dpercent;
            //只显示名称和百分比
            return name + ' ' + dpercent
          }
        }
      },
      itemWidth: 6,  // 设置宽度
      itemHeight: 6, // 设置高度
      icon: 'diamond',
      textStyle: {
        color: '#ffffff',
        fontSize: 10
      },
      left: '55%',
      top: 'middle',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['45%', '60%'],
        center: ['22.5%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 10,
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 50, name: '漏件与多件' },
          { value: 25, name: '装配误差' },
          { value: 12, name: '外观损伤' },
          { value: 5, name: '功能异常' },
          { value: 1, name: '包装与标识' },
          { value: 1, name: '来料问题' },
        ],
        color: ['#33cccc', '#bfeaff', '#177de0', '#f7b91b', '#2ecc4f', '#f03d2f']
      }
    ]
  }
  energyList.setOption(option, true)
  energyList.on('mouseover', function (params) {
    nhValue.value = params.percent.toFixed(0)
    nhTxt.value = params.data.name
  })
  window.addEventListener("resize", resize)
}
// 生产设备
const getProductionEquipmentInit = () => {
  let option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '100%'],
        radius: '150%',
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#34ffbf' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#159aff' // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        }, 'none'],
        progress: {
          show: true,
          width: 8
        },
        pointer: null,
        axisLine: {
          lineStyle: {
            width: 8,
            color: [[1, '#054569']]
          }
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: [
          {
            value: 70,
          }
        ],
        detail: {
          fontSize: 16,
          offsetCenter: [0, '-25%'],
          valueAnimation: true,
          formatter: function (value) {
            return value + '%'
          },
          color: '#fff',
        },
      }
    ]
  }
  productionEquipmentList.setOption(option, true)
  window.addEventListener("resize", resize)
}
const getYieldInit = () => {
  let option = {
    legend: {
      data: ['标准值', '实际值'],
      itemWidth: 6,  // 设置宽度
      itemHeight: 6, // 设置高度
      icon: 'diamond',
      textStyle: {
        color: '#96b2d2',
        fontSize: 10
      },
      left: '5%',
      top: '1%',
    },
    xAxis: {
      type: 'category',
      data: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6'],
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          width: 1,
          color: '#2d3d4f'
        }
      },
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    grid: {
      top: '28px',
      left: '15%',
      right: '8%',
      bottom: '25%',
    },
    series: [
      {
        data: [820, 1290, 1032, 901, 534, 1330],
        type: 'line',
        symbol: 'none',
        smooth: true,
        name: '标准值'
      },
      {
        data: [620, 532, 601, 834, 1090, 1030],
        type: 'line',
        smooth: true,
        symbol: 'none',
        name: '实际值'
      }
    ]
  }
  yieldList.setOption(option, true)
  window.addEventListener("resize", resize)
}


const resize = () => {
  yieldList.resize()
  energyList.resize()
  centerBottomList.resize()
  productionEquipmentList.resize()
}
const echartsInit = () => {
  centerBottomList = echarts.init(centerBottomRef.value)
  productionEquipmentList = echarts.init(productionEquipmentRef.value)
  yieldList = echarts.init(yieldRef.value)
  energyList = echarts.init(energyRef.value)
}
onMounted(() => {
  echartsInit()
  getYieldInit()
  getEnergyInit()
  getCenterBottomInit()
  getProductionEquipmentInit()
});
</script>

<style scoped lang="less">
.FactoryOverview {
  display: flex;
  justify-content: space-between;
  background: url(../../assets/img/bg2.png) no-repeat;
  background-size: 100% 100%;
  .leftFactory {
    margin-top: -20px;
    .conList {
      width: 530px;
    }
    .first {
      height: 256px;
      background: rgba(1, 27, 55, 0.6);
      margin: 20px 0;
      .conMain {
        display: flex;
        padding: 12px;
        p {
          font-size: 14px;
          &:last-child {
            font-size: 12px;
          }
          span {
            font-size: 24px;
            color: #00f6ff;
            margin-right: 2px;
          }
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          width: 530px;
          gap: 10px;
          li {
            width: 161px;
            height: 79px;
            background: rgba(19, 126, 90, 0.1);
            display: flex;
            padding: 10px 6px;
            align-items: center;
            > div {
              &:first-child {
                width: 50px;
                height: 50px;
              }
            }
            .inventory1 {
              background: url(../../assets/img/inventory1.png) no-repeat center;
              background-size: contain;
            }
            .inventory2 {
              background: url(../../assets/img/inventory2.png) no-repeat center;
              background-size: contain;
            }
            .inventory3 {
              background: url(../../assets/img/inventory3.png) no-repeat center;
              background-size: contain;
            }
            .inventory4 {
              background: url(../../assets/img/inventory4.png) no-repeat center;
              background-size: contain;
            }
            .inventory5 {
              background: url(../../assets/img/inventory5.png) no-repeat center;
              background-size: contain;
            }
            .inventory6 {
              background: url(../../assets/img/inventory6.png) no-repeat center;
              background-size: contain;
            }
          }
        }
      }
    }
    .second {
      height: 266px;
      background: rgba(1, 27, 55, 0.6);
      .conMain {
        width: 520px;
        height: 210px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 55px;
        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          line-height: 24px;
          font-size: 12px;
          p {
            color: #bfc2c6;
            font-size: 14px;
            &:first-child {
              width: 50px;
              height: 50px;
              margin-bottom: 5px;
            }
            &:last-child {
              margin-top: 5px;
              font-size: 12px;
              color: #fff;
              background-color: #05ab49;
              line-height: 18px;
              border-radius: 2px;
              padding: 0 5px;
            }
            span {
              color: #fff;
              font-size: 20px;
              margin-right: 3px;
            }
            &.warring {
              background-color: #d09605;
            }
          }
          .sctsIcon1 {
            background: url(../../assets/img/sctsIcon1.png) no-repeat center;
            background-size: contain;
          }
          .sctsIcon2 {
            background: url(../../assets/img/sctsIcon2.png) no-repeat center;
            background-size: contain;
          }
          .sctsIcon3 {
            background: url(../../assets/img/sctsIcon3.png) no-repeat center;
            background-size: contain;
          }
          .sctsIcon4 {
            background: url(../../assets/img/sctsIcon4.png) no-repeat center;
            background-size: contain;
          }
        }
      }
    }
    .third {
      height: 380px;
      background: rgba(1, 27, 55, 0.6);
      .conMain {
        .titleBox {
          display: flex;
          justify-content: flex-end;
          .title {
            display: flex;
            justify-content: end;
            padding-right: 30px;
            padding-top: 5px;
          }
          p {
            width: 124px;
            height: 36px;
            background: rgba(216, 240, 255, 0.1);
            border-left: 1px solid #6e7a83;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              font-size: 24px;
              color: #00f6ff;
              margin: 0 5px;
            }
          }
        }
      }
      .tableBox {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 280px;
        padding: 10px;
        overflow: hidden;
        > div {
          display: flex;
          margin-bottom: 2px;
          color: #d0deee;
          p {
            width: 100px;
            font-size: 14px;
            padding: 8px 0 8px 10px;
            display: flex;
            align-items: center;
            justify-content: start;
            span {
              display: block;
              width: 16px;
              height: 16px;
              margin-right: 5px;
            }
          }
          &.title {
            color: #02a6f6;
            background: rgba(9, 25, 53, 0.9);
          }
          &.warring {
            background: rgba(241, 17, 17, 0.44);
            p {
              &:nth-child(3),
              &:nth-child(5) {
                color: #ff3b3b;
              }
            }
            span {
              background: url(../../assets/img/warring.png) no-repeat center;
              background-size: contain;
            }
          }
          &.success {
            span {
              background: url(../../assets/img/success.png) no-repeat center;
              background-size: contain;
            }
          }
        }
      }
    }
  }
  .centerMain {
    width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 60px;
    .topMain {
      width: 756px;
      height: 91px;
      background-image: linear-gradient(
        to bottom,
        rgba(0, 67, 118, 1),
        rgba(0, 67, 118, 0),
        rgba(0, 67, 118, 1)
      );
      border: 1px solid #0b5056;
      border-radius: 5px;
      display: flex;
      align-items: center;
      li {
        width: 100px;
        padding-left: 5px;
        color: #b3bcc5;
        p {
          white-space: nowrap;
        }
        span {
          color: #fff;
          text-shadow: 0px 0px 4px #00a7ff;
          font-size: 30px;
          margin-right: 2px;
        }
      }
      .inventory7 {
        background: url(../../assets/img/inventory7.png) no-repeat right;
      }
      .inventory8 {
        background: url(../../assets/img/inventory8.png) no-repeat right;
      }
      .inventory9 {
        background: url(../../assets/img/inventory9.png) no-repeat right;
      }
      .inventory10 {
        background: url(../../assets/img/inventory10.png) no-repeat right;
      }
      .inventoryBox {
        background-size: contain;
        width: 68px;
        height: 60px;
        margin-left: 15px;
        border-left: 1px solid;
        border-image: linear-gradient(
            to bottom,
            rgba(32, 80, 97, 0),
            rgba(32, 80, 97, 1),
            rgba(32, 80, 97, 0)
          )
          1;
        &:first-child {
          border-left-width: 0;
        }
      }
    }

    .bottomMain {
      width: 760px;
      height: 246px;
      background: url(../../assets/img/center3.png) no-repeat;
      background-size: 100% 100%;
      .centerBottom {
        width: 760px;
        height: 245px;
      }
    }
  }
  .rightFactory {
    width: 530px;
    margin-top: -26px;
    .rightF1 {
      width: 530px;
      height: 95px;
      background: url(../../assets/img/right1.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      gap: 15px;
      align-items: center;
      justify-content: center;
      .button {
        width: 125px;
        height: 70px;
        background: url(../../assets/img/buttonRight.png) no-repeat;
        background-size: 100% 100%;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
        p {
          font-size: 14px;
          span {
            font-size: 30px;
            color: #fff;
            font-family: DS-Digital;
            text-shadow: 0px 0px 4px #00a7ff;
            margin-right: 3px;
          }
        }
      }
      .icon {
        width: 55px;
        height: 90px;
        margin-left: 15px;
        background: url(../../assets/img/icond.png) no-repeat center;
        background-size: contain;
      }
      .text {
        font-size: 16px;
        color: #00ff96;
      }
    }
    .conList {
      margin-top: 10px;
      background: rgba(1, 27, 55, 0.6);
    }
    .rightStyles {
      .con {
        display: flex;
        flex-direction: column;
        .text {
          width: 456px;
          height: 90px;
          background-size: 100% auto;
          display: flex;
          justify-content: center;
          align-items: center;
          li {
            padding: 0 30px;
            position: relative;
            &::after {
              content: "";
              display: block;
              position: absolute;
              right: -2px;
              top: 8px;
              height: 45px;
              border-right: 1px dashed #999;
            }
            &:last-child {
              &::after {
                height: 0px;
              }
            }
            p {
              color: rgba(255, 255, 255, 0.7);
              span {
                font-size: 32px;
                color: #fff;
                margin-right: 2px;
              }
            }
          }
        }
        .zlBottom {
          display: flex;
          justify-content: start;
          padding-left: 50px;
          align-items: center;
          height: 235px;
          .tip {
            color: #7d838a;
            font-size: 14px;
          }
        }
        .productionEquipmentBox {
          width: 440px;
          height: 240px;
          position: relative;
          .textZL {
            p:first-child {
              span {
                color: #fff;
                font-size: 18px;
                margin-right: 3px;
              }
            }
            height: 180px;
            width: 180px;
            position: absolute;
            left: 2%;
            top: 12.5%;
            text-align: center;
            font-size: 12px;
            color: #bfc2c6;
            background: url(../../assets/img/huan1.png) no-repeat center;
            background-size: contain;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .productionEquipment {
            width: 440px;
            height: 240px;
          }
        }
      }
    }
    .rightF2 {
      width: 530px;
      height: 266px;
      .con {
        display: flex;
        flex-direction: inherit;
        gap: 20px;
        align-items: center;
        height: 200px;
        .textBox {
          font-size: 42px;
          color: #fff;
          p {
            &:first-child {
              font-size: 20px;
              color: #cccfd2;
              margin-bottom: 15px;
            }
          }
        }
      }
      .productionEquipment {
        width: 221px;
        height: 110px;
        margin-left: 20px;
        background: url(../../assets/img/dash.png) no-repeat bottom;
        background-size: contain;
      }
    }
    .rightF3 {
      width: 530px;
      height: 256px;
      .yieldList {
        width: 530px;
        height: 205px;
      }
      .yieldBox {
        position: relative;
        .title {
          padding: 3px 15px;
          background: rgba(216, 240, 255, 0.1);
          border-left: 1px solid #6e7a83;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: 8%;
          top: 2%;
          span {
            font-size: 24px;
            color: #00f6ff;
            margin: 0 4px;
          }
        }
      }
    }
    .rightF4 {
      width: 530px;
      height: 290px;
      .zlBottom {
        .tip {
          line-height: 25px;
          p {
            position: relative;
            color: #fff;
            &::after {
              content: "";
              display: block;
              width: 8px;
              height: 8px;
              background-color: #177de0;
              position: absolute;
              left: -15px;
              top: 10px;
            }
            &:first-child {
              &::after {
                background-color: #33cccc;
              }
            }
            &:last-child {
              &::after {
                background-color: #bfeaff;
              }
            }
            span {
              margin-left: 40px;
            }
          }
        }
      }
    }
  }
}
</style>